import React from 'react';
import {
  CardStyleInterpolators,
  createStackNavigator,
  HeaderStyleInterpolators,
} from '@react-navigation/stack';
import {Platform, StyleSheet, TouchableOpacity} from 'react-native';
// import {statusBarHeight} from '../../utils/index';
import HeaderBackImage from '../../common/HeaderBackImage';
// 页面
import HomeScreen from '../../views/HomeScreen'; // 首页
import MyScreen from '../../views/MyScreen'; // 我的
import LoginScreen from '../../views/LoginScreen'; // 我的



import ThemeExample from '../../views/teaset/ThemeExample';
import LabelExample from '../../views/teaset/LabelExample';
import ButtonExample from '../../views/teaset/ButtonExample';
import CheckboxExample from '../../views/teaset/CheckboxExample';
import InputExample from '../../views/teaset/InputExample';
import SelectExample from '../../views/teaset/SelectExample';
import StepperExample from '../../views/teaset/StepperExample';
import SearchInputExample from '../../views/teaset/SearchInputExample';
import BadgeExample from '../../views/teaset/BadgeExample';
import PopoverExample from '../../views/teaset/PopoverExample';
import NavigationBarExample from '../../views/teaset/NavigationBarExample';
import ListRowExample from '../../views/teaset/ListRowExample';
import CarouselExample from '../../views/teaset/CarouselExample';
import ProjectorExample from '../../views/teaset/ProjectorExample';
import SegmentedBarExample from '../../views/teaset/SegmentedBarExample';
import SegmentedViewExample from '../../views/teaset/SegmentedViewExample';
import TabViewExample from '../../views/teaset/TabViewExample';
import TransformViewExample from '../../views/teaset/TransformViewExample';
import AlbumViewExample from '../../views/teaset/AlbumViewExample';
import WheelExample from '../../views/teaset/WheelExample';
import OverlayExample from '../../views/teaset/OverlayExample';
import ToastExample from '../../views/teaset/ToastExample';
import ActionSheetExample from '../../views/teaset/ActionSheetExample';
import ActionPopoverExample from '../../views/teaset/ActionPopoverExample';
import PullPickerExample from '../../views/teaset/PullPickerExample';
import PopoverPickerExample from '../../views/teaset/PopoverPickerExample';
import MenuExample from '../../views/teaset/MenuExample';
import DrawerExample from '../../views/teaset/DrawerExample';
import ModalIndicatorExample from '../../views/teaset/ModalIndicatorExample';




const RootStack = createStackNavigator();

function RootStackScreen() {
  return (
    <RootStack.Navigator
      headerMode="float"
      screenOptions={{
        headerTitleAlign: 'center',
        headerBackTitleVisible: false,
        headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        gestureEnabled: true,
        // headerStatusBarHeight: statusBarHeight,
        headerStyle: {
          ...Platform.select({
            android: {
              elevation: 0,
              borderBottomWidth: StyleSheet.hairlineWidth,
            },
          }),
        },
      }}>
      <RootStack.Screen
        name="HomePage"
        component={HomeScreen}
        options={{headerTitle: '首页'}}
      />
      <RootStack.Screen
        name="Teaset演示頁"
        component={LoginScreen}
        options={{headerTitle: 'Teaset演示頁'}}
      />
      <RootStack.Screen
        name="MyPage"
        component={MyScreen}
        options={({navigation}) => {
          return {
            headerTitle: '個人中心',
            headerTitleStyle: styles.title,
            headerBackImage: () => {
              return (
                <TouchableOpacity onPress={() => navigation.goBack()}>
                  <HeaderBackImage />
                </TouchableOpacity>
              );
            },
          };
        }}
      />


      <RootStack.Screen
        name="ThemeExample"
        component={ThemeExample}
        options={{headerTitle: 'ThemeExample'}}
      />
<RootStack.Screen  name="LabelExample"          component={LabelExample} options={{headerTitle: 'LabelExample'}} />
<RootStack.Screen name="ButtonExample"          component={ButtonExample} options={{headerTitle: 'ButtonExample'}} />
<RootStack.Screen name="CheckboxExample"        component={CheckboxExample} options={{headerTitle: 'CheckboxExample'}}/>
<RootStack.Screen name="InputExample"           component={InputExample}                 options={{headerTitle: '  InputExample         '}}                 />        
<RootStack.Screen name="SelectExample"          component={SelectExample}                options={{headerTitle: '  SelectExample        '}}                   />
<RootStack.Screen name="StepperExample"         component={StepperExample}               options={{headerTitle: '  StepperExample       '}}                   />
<RootStack.Screen name="SearchInputExample"     component={SearchInputExample}           options={{headerTitle: '  SearchInputExample   '}}                       />
<RootStack.Screen name="BadgeExample"           component={BadgeExample}                 options={{headerTitle: '  BadgeExample         '}}                 />
<RootStack.Screen name="PopoverExample"         component={PopoverExample}               options={{headerTitle: '  PopoverExample       '}}                   />
<RootStack.Screen name="NavigationBarExample"   component={NavigationBarExample}         options={{headerTitle: '  NavigationBarExample '}}                         />
<RootStack.Screen name="ListRowExample"         component={ListRowExample}               options={{headerTitle: '  ListRowExample       '}}                   />
<RootStack.Screen name="CarouselExample"        component={CarouselExample}              options={{headerTitle: '  CarouselExample      '}}                    />
<RootStack.Screen name="ProjectorExample"       component={ProjectorExample}             options={{headerTitle: '  ProjectorExample     '}}                     />
<RootStack.Screen name="SegmentedBarExample"    component={SegmentedBarExample}          options={{headerTitle: '  SegmentedBarExample  '}}                        />
<RootStack.Screen name="SegmentedViewExample"   component={SegmentedViewExample}         options={{headerTitle: '  SegmentedViewExample '}}                         />
<RootStack.Screen name="TabViewExample"         component={TabViewExample}               options={{headerTitle: '  TabViewExample       '}}                   />
<RootStack.Screen name="TransformViewExample"   component={TransformViewExample}         options={{headerTitle: '  TransformViewExample '}}                         />
<RootStack.Screen name="AlbumViewExample"       component={AlbumViewExample}             options={{headerTitle: '  AlbumViewExample     '}}                     />
<RootStack.Screen name="WheelExample"           component={WheelExample}                 options={{headerTitle: '  WheelExample         '}}                 />
<RootStack.Screen name="OverlayExample"         component={OverlayExample}               options={{headerTitle: '  OverlayExample       '}}                   />
<RootStack.Screen name="ToastExample"           component={ToastExample}                 options={{headerTitle: '  ToastExample         '}}                 />
<RootStack.Screen name="ActionSheetExample"     component={ActionSheetExample}           options={{headerTitle: '  ActionSheetExample   '}}                       />  
<RootStack.Screen name="ActionPopoverExample"   component={ActionPopoverExample}         options={{headerTitle: '  ActionPopoverExample '}}                         />
<RootStack.Screen name="PullPickerExample"      component={PullPickerExample}            options={{headerTitle: '  PullPickerExample    '}}                      />
<RootStack.Screen name="PopoverPickerExample"   component={PopoverPickerExample}         options={{headerTitle: '  PopoverPickerExample '}}                         />
<RootStack.Screen name="MenuExample"            component={MenuExample}                  options={{headerTitle: '  MenuExample          '}}                />
<RootStack.Screen name="DrawerExample"          component={DrawerExample}                options={{headerTitle: '  DrawerExample        '}}                  />
<RootStack.Screen name="ModalIndicatorExample"  component={ModalIndicatorExample}        options={{headerTitle: '  ModalIndicatorExample'}}                          />





    </RootStack.Navigator>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 16,
    color: '#222',
  },
});

export default RootStackScreen;
